رندر همزمان در ری‌اکت: آزادسازی عملکرد با معماری فایبر و تحلیل حلقه کار (Work Loop)

ری‌اکت، به عنوان یک نیروی غالب در توسعه فرانت‌اند، به طور مداوم برای پاسخگویی به تقاضای رابط‌های کاربری پیچیده‌تر و تعاملی‌تر تکامل یافته است. یکی از مهم‌ترین پیشرفت‌ها در این تکامل، رندر همزمان (Concurrent Rendering) است که با ری‌اکت ۱۶ معرفی شد. این تغییر پارادایم، اساساً نحوه مدیریت به‌روزرسانی‌ها و رندر کامپوننت‌ها توسط ری‌اکت را تغییر داد و بهبودهای عملکردی قابل توجهی را به ارمغان آورد و تجربیات کاربری واکنش‌پذیرتری را ممکن ساخت. این مقاله به بررسی مفاهیم اصلی رندر همزمان، معماری فایبر و حلقه کار می‌پردازد و بینش‌هایی در مورد چگونگی کمک این مکانیزم‌ها به ایجاد اپلیکیشن‌های ری‌اکت روان‌تر و کارآمدتر ارائه می‌دهد.

درک نیاز به رندر همزمان

پیش از رندر همزمان، ری‌اکت به صورت همزمان (synchronous) عمل می‌کرد. هنگامی که یک به‌روزرسانی رخ می‌داد (مانند تغییر state یا به‌روزرسانی prop)، ری‌اکت شروع به رندر کل درخت کامپوننت در یک عملیات واحد و بدون وقفه می‌کرد. این رندر همزمان می‌توانست منجر به گلوگاه‌های عملکردی شود، به ویژه هنگام کار با درخت‌های کامپوننت بزرگ یا عملیات محاسباتی سنگین. در طول این دوره‌های رندر، مرورگر غیرپاسخگو می‌شد که منجر به یک تجربه کاربری کند و ناامیدکننده می‌گردید. این وضعیت اغلب به عنوان "مسدود کردن رشته اصلی" (blocking the main thread) شناخته می‌شود.

سناریویی را تصور کنید که در آن کاربر در حال تایپ کردن در یک فیلد متنی است. اگر کامپوننتی که مسئول نمایش متن تایپ شده است، بخشی از یک درخت کامپوننت بزرگ و پیچیده باشد، هر ضربه به کلید می‌تواند یک رندر مجدد را آغاز کند که رشته اصلی را مسدود می‌کند. این امر منجر به تأخیر قابل توجه و تجربه کاربری ضعیف می‌شود.

رندر همزمان این مشکل را با اجازه دادن به ری‌اکت برای تقسیم وظایف رندر به واحدهای کاری کوچکتر و قابل مدیریت حل می‌کند. این واحدها می‌توانند بر اساس نیاز اولویت‌بندی، متوقف و از سر گرفته شوند، که به ری‌اکت اجازه می‌دهد وظایف رندر را با سایر عملیات مرورگر، مانند مدیریت ورودی کاربر یا درخواست‌های شبکه، در هم بیامیزد. این رویکرد از مسدود شدن رشته اصلی برای مدت طولانی جلوگیری می‌کند و منجر به یک تجربه کاربری روان‌تر و واکنش‌پذیرتر می‌شود. آن را مانند چندوظیفگی (multitasking) برای فرآیند رندر ری‌اکت در نظر بگیرید.

معرفی معماری فایبر

در قلب رندر همزمان، معماری فایبر قرار دارد. فایبر نشان‌دهنده یک پیاده‌سازی مجدد کامل از الگوریتم تطبیق (reconciliation) داخلی ری‌اکت است. برخلاف فرآیند تطبیق همزمان قبلی، فایبر یک رویکرد پیچیده‌تر و دقیق‌تر برای مدیریت به‌روزرسانی‌ها و رندر کامپوننت‌ها معرفی می‌کند.

فایبر چیست؟

یک فایبر را می‌توان به طور مفهومی به عنوان یک نمایش مجازی از یک نمونه کامپوننت درک کرد. هر کامپوننت در اپلیکیشن ری‌اکت شما با یک گره فایبر متناظر مرتبط است. این گره‌های فایبر یک ساختار درختی را تشکیل می‌دهند که آینه‌ای از درخت کامپوننت است. هر گره فایبر اطلاعاتی در مورد کامپوننت، props آن، فرزندانش و state فعلی آن را نگهداری می‌کند. نکته مهم این است که همچنین اطلاعاتی در مورد کاری که باید برای آن کامپوننت انجام شود را نیز در خود جای داده است.

ویژگی‌های کلیدی یک گره فایبر عبارتند از:

• type: نوع کامپوننت (مثلاً div، MyComponent).
• key: کلید منحصر به فرد اختصاص داده شده به کامپوننت (برای تطبیق کارآمد استفاده می‌شود).
• props: پراپ‌های ارسال شده به کامپوننت.
• child: یک اشاره‌گر به گره فایبر که اولین فرزند کامپوننت را نشان می‌دهد.
• sibling: یک اشاره‌گر به گره فایبر که خواهر/برادر بعدی کامپوننت را نشان می‌دهد.
• return: یک اشاره‌گر به گره فایبر که والد کامپوننت را نشان می‌دهد.
• stateNode: یک ارجاع به نمونه واقعی کامپوننت (مثلاً یک گره DOM برای کامپوننت‌های میزبان، یک نمونه کامپوننت کلاسی).
• alternate: یک اشاره‌گر به گره فایبر که نسخه قبلی کامپوننت را نشان می‌دهد.
• effectTag: یک پرچم که نوع به‌روزرسانی مورد نیاز برای کامپوننت را نشان می‌دهد (مثلاً جایگذاری، به‌روزرسانی، حذف).

درخت فایبر

درخت فایبر یک ساختار داده پایدار است که وضعیت فعلی رابط کاربری اپلیکیشن را نشان می‌دهد. هنگامی که یک به‌روزرسانی رخ می‌دهد، ری‌اکت یک درخت فایبر جدید را در پس‌زمینه ایجاد می‌کند که وضعیت مطلوب رابط کاربری پس از به‌روزرسانی را نشان می‌دهد. این درخت جدید به عنوان درخت "در حال پیشرفت" (work-in-progress) شناخته می‌شود. پس از تکمیل درخت در حال پیشرفت، ری‌اکت آن را با درخت فعلی جایگزین می‌کند و تغییرات را برای کاربر قابل مشاهده می‌سازد.

این رویکرد دو درختی به ری‌اکت اجازه می‌دهد تا به‌روزرسانی‌های رندر را به صورت غیرمسدودکننده (non-blocking) انجام دهد. درخت فعلی برای کاربر قابل مشاهده باقی می‌ماند در حالی که درخت در حال پیشرفت در پس‌زمینه ساخته می‌شود. این امر از یخ زدن یا غیرپاسخگو شدن رابط کاربری در حین به‌روزرسانی‌ها جلوگیری می‌کند.

مزایای معماری فایبر

• رندر قابل وقفه: فایبر به ری‌اکت امکان می‌دهد تا وظایف رندر را متوقف و از سر بگیرد، که به آن اجازه می‌دهد تا تعاملات کاربر را اولویت‌بندی کرده و از مسدود شدن رشته اصلی جلوگیری کند.
• رندر تدریجی: فایبر به ری‌اکت اجازه می‌دهد تا به‌روزرسانی‌های رندر را به واحدهای کاری کوچکتر تقسیم کند که می‌توانند به صورت تدریجی در طول زمان پردازش شوند.
• اولویت‌بندی: فایبر به ری‌اکت اجازه می‌دهد تا انواع مختلف به‌روزرسانی‌ها را اولویت‌بندی کند و اطمینان حاصل کند که به‌روزرسانی‌های حیاتی (مانند ورودی کاربر) قبل از به‌روزرسانی‌های کم‌اهمیت‌تر (مانند واکشی داده در پس‌زمینه) پردازش می‌شوند.
• مدیریت خطای بهبود یافته: فایبر مدیریت خطاها در حین رندر را آسان‌تر می‌کند، زیرا به ری‌اکت اجازه می‌دهد در صورت بروز خطا به یک وضعیت پایدار قبلی بازگردد.

حلقه کار (Work Loop): چگونه فایبر همزمانی را ممکن می‌سازد

حلقه کار موتوری است که رندر همزمان را به پیش می‌برد. این یک تابع بازگشتی است که درخت فایبر را پیمایش می‌کند، روی هر گره فایبر کار انجام می‌دهد و رابط کاربری را به صورت تدریجی به‌روزرسانی می‌کند. حلقه کار مسئول وظایف زیر است:

• انتخاب فایبر بعدی برای پردازش.
• انجام کار روی فایبر (مثلاً محاسبه state جدید، مقایسه props، رندر کامپوننت).
• به‌روزرسانی درخت فایبر با نتایج کار.
• زمان‌بندی کارهای بیشتر برای انجام شدن.

فازهای حلقه کار

حلقه کار از دو فاز اصلی تشکیل شده است:

1. فاز رندر (همچنین به عنوان فاز تطبیق شناخته می‌شود): این فاز مسئول ساختن درخت فایبرِ در حال پیشرفت است. در طول این فاز، ری‌اکت درخت فایبر را پیمایش می‌کند، درخت فعلی را با وضعیت مطلوب مقایسه کرده و تعیین می‌کند که چه تغییراتی باید اعمال شود. این فاز ناهمزمان و قابل وقفه است. این فاز مشخص می‌کند که چه چیزی *نیاز* به تغییر در DOM دارد.
2. فاز کامیت (Commit Phase): این فاز مسئول اعمال تغییرات به DOM واقعی است. در طول این فاز، ری‌اکت گره‌های DOM را به‌روزرسانی می‌کند، گره‌های جدید اضافه می‌کند و گره‌های قدیمی را حذف می‌کند. این فاز همزمان و غیرقابل وقفه است. این فاز *واقعاً* DOM را تغییر می‌دهد.

چگونه حلقه کار همزمانی را ممکن می‌سازد

کلید رندر همزمان در این واقعیت نهفته است که فاز رندر ناهمزمان و قابل وقفه است. این بدان معناست که ری‌اکت می‌تواند فاز رندر را در هر زمان متوقف کند تا به مرورگر اجازه دهد کارهای دیگر مانند ورودی کاربر یا درخواست‌های شبکه را مدیریت کند. هنگامی که مرورگر بیکار است، ری‌اکت می‌تواند فاز رندر را از جایی که متوقف شده بود از سر بگیرد.

این قابلیت توقف و از سرگیری فاز رندر به ری‌اکت اجازه می‌دهد تا وظایف رندر را با سایر عملیات مرورگر در هم بیامیزد، از مسدود شدن رشته اصلی جلوگیری کرده و تجربه کاربری واکنش‌پذیرتری را تضمین کند. از سوی دیگر، فاز کامیت باید همزمان باشد تا از سازگاری در رابط کاربری اطمینان حاصل شود. با این حال، فاز کامیت معمولاً بسیار سریع‌تر از فاز رندر است، بنابراین معمولاً باعث ایجاد گلوگاه‌های عملکردی نمی‌شود.

اولویت‌بندی در حلقه کار

ری‌اکت از یک الگوریتم زمان‌بندی مبتنی بر اولویت برای تعیین اینکه کدام گره‌های فایبر را ابتدا پردازش کند، استفاده می‌کند. این الگوریتم بر اساس اهمیت هر به‌روزرسانی، یک سطح اولویت به آن اختصاص می‌دهد. به عنوان مثال، به‌روزرسانی‌هایی که توسط ورودی کاربر ایجاد می‌شوند، معمولاً اولویت بالاتری نسبت به به‌روزرسانی‌های ناشی از واکشی داده در پس‌زمینه دارند.

حلقه کار همیشه ابتدا گره‌های فایبر با بالاترین اولویت را پردازش می‌کند. این امر تضمین می‌کند که به‌روزرسانی‌های حیاتی به سرعت پردازش شوند و یک تجربه کاربری واکنش‌پذیر فراهم کنند. به‌روزرسانی‌های کم‌اهمیت‌تر در پس‌زمینه و زمانی که مرورگر بیکار است، پردازش می‌شوند.

این سیستم اولویت‌بندی برای حفظ یک تجربه کاربری روان، به ویژه در اپلیکیشن‌های پیچیده با به‌روزرسانی‌های همزمان متعدد، بسیار حیاتی است. سناریویی را در نظر بگیرید که کاربر در حال تایپ در یک نوار جستجو است در حالی که همزمان، اپلیکیشن در حال واکشی و نمایش لیستی از عبارات جستجوی پیشنهادی است. به‌روزرسانی‌های مربوط به تایپ کاربر باید اولویت‌بندی شوند تا اطمینان حاصل شود که فیلد متنی واکنش‌پذیر باقی می‌ماند، در حالی که به‌روزرسانی‌های مربوط به عبارات جستجوی پیشنهادی می‌توانند در پس‌زمینه پردازش شوند.

نمونه‌های عملی از رندر همزمان در عمل

بیایید چند نمونه عملی از چگونگی بهبود عملکرد و تجربه کاربری اپلیکیشن‌های ری‌اکت توسط رندر همزمان را بررسی کنیم.

۱. دیبانس کردن (Debouncing) ورودی کاربر

یک نوار جستجو را در نظر بگیرید که نتایج جستجو را همزمان با تایپ کاربر نمایش می‌دهد. بدون رندر همزمان، هر ضربه به کلید می‌تواند باعث رندر مجدد کل لیست نتایج جستجو شود که منجر به مشکلات عملکردی و یک تجربه کاربری کند می‌شود.

با رندر همزمان، می‌توانیم از دیبانس کردن برای به تأخیر انداختن رندر نتایج جستجو تا زمانی که کاربر برای مدت کوتاهی تایپ را متوقف کند، استفاده کنیم. این به ری‌اکت اجازه می‌دهد تا ورودی کاربر را اولویت‌بندی کرده و از غیرپاسخگو شدن رابط کاربری جلوگیری کند.

در اینجا یک مثال ساده آورده شده است:

import React, { useState, useCallback } from 'react';

function SearchBar() {
 const [searchTerm, setSearchTerm] = useState('');

 const debouncedSearch = useCallback(
 debounce((value) => {
 // Perform search logic here
 console.log('Searching for:', value);
 }, 300),
 []
 );

 const handleChange = (event) => {
 const value = event.target.value;
 setSearchTerm(value);
 debouncedSearch(value);
 };

 return (
 
 );
}

// Debounce function
function debounce(func, delay) {
 let timeout;
 return function(...args) {
 const context = this;
 clearTimeout(timeout);
 timeout = setTimeout(() => func.apply(context, args), delay);
 };
}

export default SearchBar;

در این مثال، تابع debounce اجرای منطق جستجو را تا زمانی که کاربر برای ۳۰۰ میلی‌ثانیه تایپ را متوقف کند به تأخیر می‌اندازد. این تضمین می‌کند که نتایج جستجو فقط در صورت لزوم رندر می‌شوند و عملکرد اپلیکیشن را بهبود می‌بخشد.

۲. بارگذاری تنبل (Lazy Loading) تصاویر

بارگذاری تصاویر بزرگ می‌تواند به طور قابل توجهی بر زمان بارگذاری اولیه یک صفحه وب تأثیر بگذارد. با رندر همزمان، می‌توانیم از بارگذاری تنبل برای به تعویق انداختن بارگذاری تصاویر تا زمانی که در نمای دید (viewport) قابل مشاهده شوند، استفاده کنیم.

این تکنیک می‌تواند عملکرد درک شده اپلیکیشن را به طور قابل توجهی بهبود بخشد، زیرا کاربر مجبور نیست منتظر بارگذاری همه تصاویر بماند تا بتواند با صفحه تعامل کند.

در اینجا یک مثال ساده با استفاده از کتابخانه react-lazyload آورده شده است:

import React from 'react';
import LazyLoad from 'react-lazyload';

function ImageComponent({ src, alt }) {
 return (
 Loading...
}>
 
 
 );
}

export default ImageComponent;

در این مثال، کامپوننت LazyLoad بارگذاری تصویر را تا زمانی که در نمای دید قابل مشاهده شود به تأخیر می‌اندازد. پراپ placeholder به ما امکان می‌دهد تا در حین بارگذاری تصویر، یک نشانگر بارگذاری نمایش دهیم.

۳. Suspense برای واکشی داده‌ها

React Suspense به شما امکان می‌دهد تا رندر یک کامپوننت را در حین انتظار برای بارگذاری داده‌ها "به حالت تعلیق" درآورید. این ویژگی به ویژه برای سناریوهای واکشی داده مفید است، جایی که می‌خواهید در حین انتظار برای داده‌ها از یک API، یک نشانگر بارگذاری نمایش دهید.

Suspense به طور یکپارچه با رندر همزمان ادغام می‌شود و به ری‌اکت اجازه می‌دهد تا بارگذاری داده‌ها را اولویت‌بندی کرده و از غیرپاسخگو شدن رابط کاربری جلوگیری کند.

در اینجا یک مثال ساده آورده شده است:

import React, { Suspense } from 'react';

// A fake data fetching function that returns a Promise
const fetchData = () => {
 return new Promise(resolve => {
 setTimeout(() => {
 resolve({ data: 'Data loaded!' });
 }, 2000);
 });
};

// A React component that uses Suspense
function MyComponent() {
 const resource = fetchData();
 return (
 Loading...